import Taro, { Component } from "@tarojs/taro";
import { View, Image, Text } from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'

import '../mall/mall.less'
import success_icon from '../../assets/img/icon_29.png'
import address from "../../assets/img/icon_59.png";

// 工程金融中心-首页
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class OrderPaySuccess extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    orderInfo: {}
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'订单支付成功' })
    let id = this.$router.params.id
    if(!id) { getRuntime().navigateBack(); return }
    this.getOrder(Number.parseInt(id))
  }

  getOrder(id: number) {
    let { PointMallStore } = this.props.stores
    PointMallStore.getOrder({
      formId: id,
      callback: res => {
        this.setState({
          orderInfo: toJS(res)
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  render() {
    let { orderInfo } = this.state
    return(
      <View className='pay-success'>
        <View className='apply-success'>
          <View className='content'>
            <Image className='success-icon' src={success_icon} />
            <View className='title'>订单支付成功</View>
            <View className='pay-desc color'>请等待商家为你发货</View>
          </View>

          <View className='interval' />
          <View className='has-address'>
            <Image className='address-icon' src={address} />
            <View className='info'>
              <View className='name'>{orderInfo.receiver}  {orderInfo.receiverPhone}</View>
              <View className='address'> {orderInfo.receiverAddress}</View>
            </View>
          </View>
          <View className='interval' />

          <View className='has-address'>
            <View className='title'>实付金额</View>
            <View className='all-price color'>
              <Text className='list-small'>￥</Text>
              <Text>{orderInfo.actualAmount}</Text>
            </View>
          </View>

          <View className='btn-group'>
            <View className='btn btn-active' onClick={this.handelRouter.bind(this,'/pages/user/order_detail?id='+orderInfo.id)}>订单详情</View>
            <View className='btn' onClick={this.handelRouter.bind(this,'/pages/user/order')}>我的订单</View>
          </View>
        </View>
      </View>
    )
  }
}

export default OrderPaySuccess
